<template>
  <div>
    <h3>用户管理
                  <el-button @click="changeModel('add')" type="text" size="small" >新增</el-button>
    </h3>
       <el-table ref="multipleTable"
      :data="sysUserList"
      style="width: 100%" 
      size='mini' >
      <el-table-column label="用户" width="150">
        <template scope="scope" >
      <span >{{scope.row.nickName}}</span>
        </template>
      </el-table-column>
       
    <el-table-column label="登陆名" width="150">
        <template scope="scope" >
      <span >{{scope.row.loginName}}</span>
        </template>
       </el-table-column>

       <el-table-column label="密码" width="150">
        <template scope="scope" >
      <span >******</span>
        </template>
       </el-table-column>     
        <el-table-column label="岗位" width="150">
        <template scope="scope" >
      <span >{{scope.row.merchantRole.roleName}}</span>
        </template>
       </el-table-column>
       

          <el-table-column label="操作" width="300">
                        <template scope="scope">
    <el-button  type="text" size="small"  @click="changeModel('edit',scope.row)" :disabled="scope.row.roleType==='admin'">修改</el-button>
    <el-button  type="text" size="small"  @click="handleDeleteUser(scope.row)" :disabled="scope.row.roleType==='admin'">删除</el-button>
    
                        </template>
    </el-table-column>
        

          </el-table>




 
  <el-dialog :title="dialogType==='add'?'新增用户':'修改用户'" :visible.sync="userModel" style="padding:20px 100px" center width="500" top="10vh" :close-on-click-modal='false'>
      
      
      <el-form label-width="100px" v-model="form">
    <el-row :gutter="24">
        <el-col :span="20">
            <el-form-item label="登陆名">
                  <el-input v-model="form.loginName" maxlength="11" placeholder="请输入登录名"></el-input>
            </el-form-item>

            <el-form-item label="密码">
                  <el-input v-model="form.password" maxlength="30" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
   <el-form-item label="用户名">
                  <el-input v-model="form.nickName" maxlength="20" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="岗位">
                    <el-select v-model="form.roleId" placeholder="请选择用户岗位">
                      
                        <el-option v-for="(item,index) in roleList" :value="item.id" :label="item.roleName" :disabled="index === 0"></el-option>

    </el-select>
            </el-form-item>
        </el-col>
    </el-row>
      </el-form>  



  <span slot="footer" class="dialog-footer">
              <el-button @click="userModel=false">取消</el-button>
              <el-button type="primary" @click="saveUser()">{{dialogType==='edit'?'保存':'新增'}}</el-button>
            </span>
 </el-dialog>



  </div>
</template>

<script>
import * as Api from "@/api/Api.js";
import * as RoundApi from "@/api/RoundApi.js";
import * as Config from "@/api/Config.js";

export default {
  data() {
    return {
      sysUserList: [],
      userModel: false,
      dialogType: "add",
      form: {
        loginName: "",
        password: "",
        nickName: "",
        roleId: ""
      },
      roleList: []
    };
  },

  methods: {
    saveUser() {
      if (
        this.form.loginName === "" ||
        this.form.password === "" ||
        this.form.nickName === "" ||
        this.form.roleId === ""
      ) {
        this.$message("请填写完整信息");
        return;
      }

      if (this.dialogType === "add") {
        RoundApi.addMerchantUser(this, this.form).then(res => {
          if (res.retCode) {
            this.userModel = !this.userModel;
            this.getSysUserList();
            this.$message("添加成功");
          }
        });
      } else {
        
        this.form.userId =this.form.merchantUserId


        RoundApi.updateMerchantUser1(this, this.form).then(res => {
          if (res.retCode) {
            this.userModel = !this.userModel;
            this.getSysUserList();
            this.$message("保存成功");
          }
        });
      }
    },
    changeModel(type, row) {
      if (type === "add") {
        this.form = {
          loginName: "",
          password: "",
          nickName: "",
          roleId: ""
        };
      } else {
        console.log(row);
        let form = {};
        Object.assign(form, row);
        this.form = form;
      }
      this.dialogType = type;
      this.userModel = !this.userModel;
    },

    handleDeleteUser(row) {
      let self = this;
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          RoundApi.delMerchantUser(this, {
            userId: row.merchantUserId
          }).then(res => {
            if (res.retCode) {
              self.getSysUserList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getSysUserList() {
      RoundApi.getSysUserList(this, {}).then(res => {
        if (res.retCode) {
          this.sysUserList = res.data.goodsList;
          console.log("商户用户", res.data);
        }
      });
    },
    getMerchantRole() {
      RoundApi.getMerchantRole(this, {}).then(res => {
        if (res.retCode) {
          console.log(res.data);
          this.roleList = res.data;
        }
      });
    }
  },
  mounted() {
    this.getSysUserList();
    this.getMerchantRole();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
